/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar
} from 'react-native'
import { StackActions, NavigationActions } from 'react-navigation';
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import ActionSheet from 'react-native-actionsheet'
import { toastShort, consoleLog } from '../../utils/utilsToast'
// 弹窗
const CANCEL_INDEX = 0
const DESTRUCTIVE_INDEX = 4
const options = [ '取消', '确认退出']
const title = '您确认要退出吗？'
export default class User extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            upup: 0,
            account: global.user.userData.account,
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        
        this.willFocus = this.props.navigation.addListener('willFocus', (payload) => {
            this.getUserInfo();
        })
    }

    componentWillUnmount(){
        // console.log(global.user)
        if(global.user.userData.token){
            this.willFocus.remove();
        }else{
            console.log(1)
        }
        
    }

    onBack = () => {
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadNetData = () => {
        
    }

    getUserInfo = () => {
        let url = ServicesApi.get_member_info;

        let data = {
            member_id: global.user.userData.id,
            token: global.user.userData.token,
        };
        Services.post(url, data)
            .then( result => {
                // console.log(result);
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    let user = result.data;

                    storage.save({
                        key: 'loginState',
                        data: user
                    });

                    global.user = {
                        loginState: true,
                        userData: user
                    };

                    this.updateState({
                        upup: 1
                    });

                }else{
                    storage.remove({
                        key: 'loginState',
                    });
                    global.user.loginState = false;
                    global.user.userData = [];
                    setTimeout(() => {
                        toastShort('您的账户信息已过期，请重新登录！')
                        const resetAction = NavigationActions.reset({
                            index: 0,
                            actions: [
                                NavigationActions.navigate({ routeName: 'Login'})
                            ]
                        })
                        this.props.navigation.dispatch(resetAction)
                    }, 101)
                }
            })
            .catch( error => {
                // toastShort('服务器请求失败，请稍后重试！');
            })
    }

    toWebview = (title,link,compent) => {
        const { navigate } = this.props.navigation;
        navigate(compent, {
            title:title,
            link:link,
        })
    }

    onPushNavigator = (compent) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            onCallBack:()=>{
                console.log('1')
            }
        })
    }

    showActionSheet = () => {
        this.ActionSheet.show()
    }

    handlePress = (i) => {
        if(i == 1){
            this.doLogOut();
        }
    }

    doLogOut = () => {
        this.removeLoginState();
    }

    removeLoginState = () => {

        storage.save({
            key: 'accountData',
            data: {
                account: this.state.account,
                shoushimima: global.account.accountData.shoushimima,
                shoushiopen: global.account.accountData.shoushiopen,
            }
        });

        global.account = {
            accountData: {
                account: this.state.account,
                shoushimima: global.account.accountData.shoushimima,
                shoushiopen: global.account.accountData.shoushiopen,
            }
        };

        storage.remove({
            key: 'loginState',
        });
        storage.remove({
            key: 'investInfo',
        });
        global.user.loginState = false;
        global.invest.investInfo = '';
        global.user.userData = '';
        setTimeout(() => {
            this.props.navigation.navigate('TabNavScreen'); //跳转到用户页面  
        }, 500);
    }

    render(){
        return (
            <View style={styles.container}>
                <ScrollView>
                    <View style={styles.userbg}>
                        <View style={[styles.userInfo, GlobalStyles.flexRowStart]}>
                            <View style={styles.userPhoto}>
                            {global.user.userData.head_img ?
                                <Image source={{uri: global.user.userData.head_img}} style={styles.userPhotoIcon} />
                            : 
                                <Image source={require('../../assets/images/icons/icon_user_touxiang.png')} style={styles.userPhotoIcon} />
                            }
                            </View>
                            <View style={styles.userMessage}>
                                <Text style={styles.username}>{global.user.userData.nickname ? global.user.userData.nickname : global.user.userData.account}</Text>
                                <View style={[styles.usertouxian, GlobalStyles.flexRowStart]}>
                                    <View style={styles.userv}>
                                        <Image source={require('../../assets/images/icons/icon_user_v.png')} style={styles.uservicon} />
                                    </View>
                                    
                                    {global.user.userData.is_investor == 1 ?
                                        <Text style={styles.uservtext}>专业投资者</Text>
                                    : 
                                        <Text style={styles.uservtext}>普通会员</Text>
                                    }
                                </View>
                            </View>
                        </View>
                        <View style={GlobalStyles.bannerTop}>
                            <TouchableOpacity onPress={() => {this.onPushNavigator('Shezhi')}} style={GlobalStyles.hide}>
                                <Image source={require('../../assets/images/icons/icon_user_shezhi.png')} style={GlobalStyles.iconsNews} />
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {this.onPushNavigator('Xiaoxi')}}>
                                <Image source={require('../../assets/images/icons/icon_news.png')} style={GlobalStyles.iconsKefu} />
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={[GlobalStyles.flexRowAround, styles.userMid]}>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Qiandao')}} style={GlobalStyles.flexColumnCenter}>
                            <Image source={require('../../assets/images/icons/icon_user_qiandao.png')} style={styles.userBigIcon} />
                            <Text style={styles.userBigText}>签到</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Tuijian')}} style={GlobalStyles.flexColumnCenter}>
                            <Image source={require('../../assets/images/icons/icon_user_tuijian.png')} style={styles.userBigIcon} />
                            <Text style={styles.userBigText}>推荐</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Jifen')}} style={GlobalStyles.flexColumnCenter}>
                            <Image source={require('../../assets/images/icons/icon_user_jifen.png')} style={styles.userBigIcon} />
                            <Text style={styles.userBigText}>积分</Text>
                        </TouchableOpacity>
                    </View>

                    <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Huiyuan')}} style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_user_huiyuan.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>会员中心</Text>
                                <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Jijin')}} style={[GlobalStyles.userlist, GlobalStyles.hide]}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_jinjinrengou.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>我的基金</Text>
                                <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Zichan')}} style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_user_zichan.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>我的资产</Text>
                                <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Shangcheng')}} style={[GlobalStyles.userlist, GlobalStyles.hide]}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_user_shangcheng.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>积分商城</Text>
                                <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                            </View>
                        </TouchableOpacity>    
                    </View>

                    <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Shoucang')}} style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_user_shoucang.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>我的收藏</Text>
                                <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                            </View>
                        </TouchableOpacity>    
                        <TouchableOpacity onPress={() => {this.onPushNavigator('Guanyu')}} style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_user_guanyu.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>关于我们</Text>
                                <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                            </View>
                        </TouchableOpacity>            
                    </View>

                    <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>  
                        <View style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_user_banben.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>当前版本</Text>
                                <Text style={styles.userlistRightText}>V {Constants.VERSION_NAME}</Text>
                            </View>
                        </View>            
                    </View>

                    <View style={[GlobalStyles.whiteModule, {marginTop: 10}]}>
                        <TouchableOpacity onPress = {() => {this.showActionSheet()}} style={GlobalStyles.userlist}>
                            <View style={GlobalStyles.userlistleft}>
                                <Image source={require('../../assets/images/icons/icon_member_tuichu.png')} style={GlobalStyles.usericon} />
                            </View>
                            <View style={GlobalStyles.userlistright}>
                                <Text style={GlobalStyles.userlisttext}>安全退出</Text>
                                <Image source={require('../../assets/images/icons/icon_user_arrow.png')} style={GlobalStyles.userlistmore} />
                            </View>
                        </TouchableOpacity>
                    </View>

                    <ActionSheet
                        ref={o => this.ActionSheet = o}
                        title={title}
                        options={options}
                        cancelButtonIndex={CANCEL_INDEX}
                        destructiveButtonIndex={DESTRUCTIVE_INDEX}
                        onPress={this.handlePress}
                    />
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
    userbg: {
        backgroundColor: GlobalStyles.themeColor,
        height: 180,
        position: 'relative',
    },
    userInfo: {
        height: 60,
        position: 'absolute',
        bottom: 30,
        left: 15,

    },
    userPhotoIcon: {
        width: 60,
        height: 60,
        borderRadius: 30
    },
    userMessage: {
        marginLeft: 10,
        height: 60
    },
    username: {
        color: '#fff',
        fontSize: 15,
        fontWeight: 'bold',
        lineHeight: 22,
        marginTop: 4
    },
    usertouxian: {
        backgroundColor: '#fff',
        height: 20,
        borderRadius: 10,
        paddingLeft: 5,
        paddingRight: 5,
        marginTop: 5
    },
    userv: {
        backgroundColor: GlobalStyles.themeColor,
        borderRadius: 8,
        width: 16,
        height: 16,
        position: 'relative',
        marginRight: 2,
    },
    uservicon: {
        width: 10,
        height: 10,
        position: 'absolute',
        top: 3,
        left: 3,
    },
    uservtext: {
        color: GlobalStyles.themeColor,
        fontSize: 12
    },
    userBigIcon: {
        width: 45,
        height: 45,
    },
    userBigText: {
        color: '#666',
        fontSize: 13,
        lineHeight: 30,
        textAlign: 'center',

    },
    userMid: {
        backgroundColor: '#fff',
        padding: 15,
        paddingBottom: 5,
        paddingTop: 12
    },
    userlistRightText: {
        position: 'absolute',
        right: 0,
        color: '#585858',
    },
});
